<script lang="ts" setup>
import {ref} from "vue";
import MyList from "./MyList.vue";
import {type ho} from "@/type"

// v-if (v-if,v-else-if,v-else)
let score=ref(101);
function setScore4(){
    score.value=91;
}
function setScore3(){
    score.value=78;
}
function setScore2(){
    score.value=60;
}
function setScore1(){
    score.value=59;
}

//
let visible=ref(true)
function visTrue(){
    visible.value=true;
}
function visFalse(){
    visible.value=false;
}

//
let howTo :ho[]=[
    {id:1,name:"怎样爱上hxd"},
    {id:2,name:"如何爱上szt"},
    {id:3,name:"怎么去爱ljh"}
]
</script>

<template>   
    <div>
        <h2 id="v">v-if</h2>
        <button @click="setScore4">优秀</button>
        <button @click="setScore3">良好</button>
        <button @click="setScore2">及格</button>
        <button @click="setScore1">不及格</button><br>
        <a>{{ score }}:</a>
        <a v-if="score>=90">优秀</a>
        <a v-else-if="score>=75 && score<90">良好</a>
        <a v-else-if="score>=60 && score<75">及格</a>
        <a v-else>不及格</a>
    </div>
    <div>
        <h2 id="v">v-show</h2>
        <a v-show="visible">让这句话</a><br><br>
        <button @click="visTrue">可见</button>
        <button @click="visFalse">不可见</button>
    </div>
    <!-- <div>
        <h2 id="v">v-for</h2>
        <ul>
            <li v-for="i in howTo" :key="i.id">{{ i.id }}:{{ i.name }}</li>
        </ul>
    </div> -->
    <div>
        <h2 id="v">v-for</h2>
        <!-- 引入一个名字叫MyList的子健 -->
        <!-- 把父里的howTo数组(L:31)作为str属性传给子 -->
        <MyList :str="howTo"></MyList>
    </div>
</template>

<style scoped>
    div{
        position: relative;
        margin:20px auto;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        border: 1px solid hotpink;
        border-radius: 5px;
        width: 550px;
    }
    button{
        border-radius: 5px;
        width: 70px;
        height: 30px;
        background-color: rgb(115, 115, 202);
        color: white;
        font-size: 15px;
        margin-right: 5px;
        margin-bottom: 15px;
        font-family: 'Courier New', Courier, monospace;
    }
    #v{
        position: absolute;
        top: 10%;
        left: 10px;
    }
</style>